<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>挂失/解挂 - 银行管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f5f5;
        }
        .main-container {
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 250px;
            background-color: #0d47a1;
            color: #fff;
            padding-top: 20px;
        }
        .sidebar .nav-link {
            color: #fff;
            padding: 10px 20px;
            border-left: 3px solid transparent;
        }
        .sidebar .nav-link:hover {
            background-color: #1565c0;
            border-left: 3px solid #fff;
        }
        .sidebar .nav-link.active {
            background-color: #1976d2;
            border-left: 3px solid #fff;
        }
        .sidebar .nav-link i {
            margin-right: 10px;
        }
        .content {
            flex: 1;
            padding: 20px;
            background-color: #fff;
        }
        .header {
            background-color: #1976d2;
            color: #fff;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
            font-size: 1.5rem;
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #1976d2;
            color: #fff;
            border-radius: 8px 8px 0 0 !important;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="sidebar">
            <div class="text-center mb-4">
                <h3>银行管理系统</h3>
            </div>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="/client/card/index">
                        <i class="fa fa-dashboard"></i> 控制台
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/client/card/balance">
                        <i class="fa fa-search"></i> 余额查询
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/client/card/deposit">
                        <i class="fa fa-plus-circle"></i> 存款
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/client/card/withdraw">
                        <i class="fa fa-minus-circle"></i> 取款
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/client/card/transfer">
                        <i class="fa fa-exchange"></i> 转账
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/client/card/transactions">
                        <i class="fa fa-list"></i> 交易记录
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/client/card/report-loss">
                        <i class="fa fa-lock"></i> 挂失/解挂
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/client/card/change-password">
                        <i class="fa fa-key"></i> 修改密码
                    </a>
                </li>
                <li class="nav-item mt-5">
                    <a class="nav-link" href="/">
                        <i class="fa fa-sign-out"></i> 退出系统
                    </a>
                </li>
            </ul>
        </div>
        
        <div class="flex-grow-1 d-flex flex-column">
            <div class="header">
                <h1>挂失/解挂</h1>
                <div class="d-flex align-items-center">
                    <span>欢迎，客户</span>
                </div>
            </div>
            
            <div class="content">
                <div id="alertContainer"></div>
                
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">银行卡挂失/解挂</h5>
                            </div>
                            <div class="card-body">
                                <form id="cardQueryForm" class="mb-4">
                                    <div class="form-group">
                                        <label for="cardId">银行卡号</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="cardId" name="cardId" placeholder="请输入银行卡号" required>
                                            <div class="input-group-append">
                                                <button type="submit" class="btn btn-primary">查询</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                
                                <div id="cardInfo" class="mt-4" style="display: none;">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h5 class="card-title">银行卡信息</h5>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <p><strong>卡号：</strong> <span id="cardIdDisplay"></span></p>
                                                    <p><strong>客户姓名：</strong> <span id="customerName"></span></p>
                                                    <p><strong>存款类型：</strong> <span id="savingName"></span></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <p><strong>余额：</strong> <span id="balance"></span> 元</p>
                                                    <p><strong>状态：</strong> <span id="status"></span></p>
                                                </div>
                                            </div>
                                            
                                            <div class="text-center mt-3">
                                                <button id="reportLossBtn" class="btn btn-danger mr-2" style="display: none;">
                                                    <i class="fa fa-lock"></i> 挂失银行卡
                                                </button>
                                                <button id="cancelLossBtn" class="btn btn-success" style="display: none;">
                                                    <i class="fa fa-unlock"></i> 解除挂失
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card mt-4">
                            <div class="card-header">
                                <h5 class="mb-0">挂失/解挂说明</h5>
                            </div>
                            <div class="card-body">
                                <ul class="mb-0">
                                    <li>挂失后，银行卡将无法进行存款、取款和转账操作</li>
                                    <li>解除挂失后，银行卡将恢复正常使用</li>
                                    <li>挂失操作是保护您资金安全的重要措施</li>
                                    <li>如银行卡丢失，请及时挂失</li>
                                    <li>如有疑问，请联系银行客服：400-123-4567</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 通用提示框
        function showAlert(message, type) {
            const alertDiv = $('<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' +
                message +
                '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                '<span aria-hidden="true">&times;</span>' +
                '</button>' +
                '</div>');
            
            $('#alertContainer').html(alertDiv);
            
            setTimeout(function() {
                alertDiv.alert('close');
            }, 3000);
        }
        
        $(document).ready(function() {
            // 查询银行卡信息
            $('#cardQueryForm').submit(function(e) {
                e.preventDefault();
                
                const cardId = $('#cardId').val().trim();
                if (!cardId) {
                    showAlert('请输入银行卡号', 'warning');
                    return;
                }
                
                // 查询银行卡信息
                $.ajax({
                    url: '/client/card/query-balance',
                    type: 'GET',
                    data: { cardId: cardId },
                    success: function(res) {
                        if (res.code === 200) {
                            const card = res.data;
                            $('#cardIdDisplay').text(card.cardId);
                            $('#customerName').text(card.customerName);
                            $('#savingName').text(card.savingName);
                            $('#balance').text(card.balance);
                            
                            const isReportLoss = card.isReportLoss === 'YES';
                            $('#status').text(isReportLoss ? '已挂失' : '正常');
                            $('#status').removeClass('text-success text-danger')
                                .addClass(isReportLoss ? 'text-danger' : 'text-success');
                            
                            // 显示对应按钮
                            $('#reportLossBtn').toggle(!isReportLoss);
                            $('#cancelLossBtn').toggle(isReportLoss);
                            
                            $('#cardInfo').show();
                        } else {
                            showAlert(res.message || '查询失败', 'danger');
                        }
                    },
                    error: function() {
                        showAlert('网络错误，请稍后重试', 'danger');
                    }
                });
            });
            
            // 挂失银行卡
            $('#reportLossBtn').click(function() {
                const cardId = $('#cardIdDisplay').text();
                
                if (confirm('确定要挂失此银行卡吗？')) {
                    $.ajax({
                        url: '/client/card/do-report-loss',
                        type: 'POST',
                        data: { cardId: cardId },
                        success: function(res) {
                            if (res.code === 200) {
                                showAlert('挂失成功', 'success');
                                $('#status').text('已挂失').removeClass('text-success').addClass('text-danger');
                                $('#reportLossBtn').hide();
                                $('#cancelLossBtn').show();
                            } else {
                                showAlert(res.message || '挂失失败', 'danger');
                            }
                        },
                        error: function() {
                            showAlert('网络错误，请稍后重试', 'danger');
                        }
                    });
                }
            });
            
            // 解除挂失
            $('#cancelLossBtn').click(function() {
                const cardId = $('#cardIdDisplay').text();
                
                if (confirm('确定要解除此银行卡的挂失状态吗？')) {
                    $.ajax({
                        url: '/client/card/do-cancel-loss',
                        type: 'POST',
                        data: { cardId: cardId },
                        success: function(res) {
                            if (res.code === 200) {
                                showAlert('解除挂失成功', 'success');
                                $('#status').text('正常').removeClass('text-danger').addClass('text-success');
                                $('#cancelLossBtn').hide();
                                $('#reportLossBtn').show();
                            } else {
                                showAlert(res.message || '解除挂失失败', 'danger');
                            }
                        },
                        error: function() {
                            showAlert('网络错误，请稍后重试', 'danger');
                        }
                    });
                }
            });
        });
    </script>
</body>
</html> 